import { connect } from 'easy-soft-dva';

import { transformSize } from 'taro-fast-common';
import { FloatAction, IconPhone, Space } from 'taro-fast-component';

import {
  ContentPageBase,
  PropertyBox,
  SimpleBox,
} from '../../../customComponents';

const icon =
  '';

const buttons = [
  {
    label: '图片按钮',
    icon,
    onClick: (o) => {
      console.log(o);
    },
  },
  {
    label: '图标按钮',
    icon: <IconPhone size={40} color="#fff" />,
    onClick: () => {
      console.log({
        message: '点击了图标按钮',
      });
    },
  },
  {
    label: '文本按钮',
    icon: '搜索',
    onClick: () => {
      console.log({
        message: '点击了图标按钮',
        type: 'success',
      });
    },
  },
  {
    label: '默认按钮',
    icon: '',
    onClick: () => {
      console.log({
        message: '点击了图标按钮',
        type: 'warning',
      });
    },
  },
];

const config1 = {
  action:
    '',
  top: transformSize(20),
  position: 'topLeft',
  theme: 'balanced',
  direction: 'horizontal',
  reverse: true,
  buttons,
};

const config2 = {
  top: transformSize(20),
  position: 'topRight',
  theme: 'balanced',
  direction: 'vertical',
  reverse: true,
  buttons,
  closeAfterItemClick: false,
};

const config3 = {
  position: 'bottomLeft',
  theme: 'balanced',
  direction: 'vertical',
  buttons,
};

const config4 = {
  action: '按钮',
  actionRotate: false,
  position: 'center',
  theme: 'balanced',
  direction: 'circle',
  buttons,
  spaceBetween: 80,
};

const config5 = {
  position: 'bottomRight',
  theme: 'balanced',
  direction: 'horizontal',
  overlay: true,
  buttons,
  closeAfterItemClick: true,
};

// eslint-disable-next-line no-undef
definePageConfig({
  navigationBarTitleText: '浮动按钮',
});

@connect(({ schedulingControl }) => ({
  schedulingControl,
}))
export default class Index extends ContentPageBase {
  headerData = {
    id: 'FloatAction',
    name: '浮动按钮',
    description: '浮动按钮组件',
  };

  constructor(properties) {
    super(properties);

    this.state = {
      ...this.state,

      header: '左上角',
      currentConfig: config1,
      inner: null,
    };
  }

  establishControlList = () => {
    return [
      {
        header: '左上角',
        config: config1,
      },
      {
        header: '右上角',
        config: config2,
      },
      {
        header: '左下角',
        config: config3,
      },
      {
        header: '右下角',
        config: config5,
      },
      {
        header: '居中',
        config: config4,
      },
    ];
  };

  buildSimpleItem = ({ key, config, inner }) => {
    return (
      <FloatAction key={key} {...config}>
        {this.buildSimpleItemInner(inner)}
      </FloatAction>
    );
  };

  renderContent = () => {
    const { header, description, currentConfig, inner } = this.state;

    return (
      <Space direction="vertical" fillWidth>
        <SimpleBox
          header={header}
          description={description}
          config={currentConfig}
          componentName="FloatAction"
          mockChildren={!!inner}
          useInnerBox={false}
          innerBoxCenterMode
          innerBoxPadding
          ignorePropertyList={['icon']}
          controlBox={this.buildControlBox(this.establishControlList())}
        >
          {this.buildSimpleList()}
        </SimpleBox>

        <PropertyBox config={FloatAction.defaultProps} labelWidth={300} />
      </Space>
    );
  };
}
